<template>
    <div id="linkRef"></div>
    <button style="margin: 12px 0;" @click="resolveData">获取数据</button>
    <code v-if="graph">
        <pre style="height: 240px;overflow: auto;">{{ graph.toJSON()}}</pre>
    </code>
</template>

<script setup>
import { dia, shapes, layout, g } from "jointjs";
import "/node_modules/jointjs/dist/joint.css";

defineOptions({
    name: "ElementEvent",
});

const graph = ref(null);
const paper = ref(null);
const rectGroupList = ref([]);

// graph.toJSON() - 将整个图形转换为 JSON 对象。
// graph.fromJSON() - 使用提供的 JSON 对象的转换内容覆盖当前图形内容。
function resolveData(params) {
    console.log(graph.value.toJSON());
}

// 创建图形和页面
function createGraph() {
    graph.value = new dia.Graph({}, { cellNamespace: shapes });
    paper.value = new dia.Paper({
        el: document.getElementById("linkRef"),
        model: graph.value,
        width: 600,
        height: 500,
        gridSize: 10,
        drawGrid: true,
        background: {
            color: "rgba(0, 255, 0, 0.3)",
        },
        cellViewNamespace: shapes,
    });

    // 双击空白区域事件
    paper.value.on('blank:pointerdblclick', (elementView, evt) => {
        // 改变画布颜色
        paper.value.drawBackground({
            color: 'orange'
        })
    });

    // 双击连线事件
    paper.value.on('link:pointerdblclick', (elementView, evt) => {
        evt.stopPropagation();
        const currentElement = elementView.model
        currentElement.attr({
            line: {
                stroke: 'tomato',
                strokeWidth: 4
            }
        })
    });

    // 双击元素事件
    paper.value.on('element:pointerdblclick', (elementView, evt) => {
        evt.stopPropagation();
        var currentElement = elementView.model;
        currentElement.attr({
            body: {
                stroke: 'yellow',
                strokeWidth: 4
            },
            label: {
                text: '双击事件'
            }
        });
    });
    // 单击元素事件
    paper.value.on('element:pointerclick', (elementView, evt) => {
        evt.stopPropagation();
        var currentElement = elementView.model;
        currentElement.attr({
            body: {
                stroke: 'tomato',
                strokeWidth: 4
            },
            label: {
                text: '单击事件'
            }
        });
    });
}

// 创建矩形
function createRect() {
    const rect = new shapes.standard.Rectangle();
    rect.position(50, 130);
    rect.resize(100, 40);
    rect.attr({
        body: {
            fill: "blue",
            rx: 10,
            ry: 10,
            // stroke: "tomato",
            strokeWidth: 2,
        },
        label: {
            text: "Hello",
            fill: "white",
            fontSize: 20,
            fontWeight: 600,
        },
    });
    rect.addTo(graph.value);
    rectGroupList.value.push(rect);
    const rect2 = rect.clone();
    rect2.position(400, 130)
    // rect2.translate(300, 130);
    rect2.attr({
        label: {
            text: "World",
            fill: "pink",
            fontSize: 20,
            fontWeight: 600,
        },
    });
    rect2.addTo(graph.value);
    rectGroupList.value.push(rect2);
}

// 创建连线
let link = ref(null)
function createLink() {
    link = new shapes.standard.Link();
    link.source(rectGroupList.value[0]);
    link.target(rectGroupList.value[1]);
    // 配置连线箭头样式，可以使用默认的箭头样式
    link.attr({
        line: {
            // 源节点箭头
            sourceMarker: {
                type: "path",
                stroke: '#10ac84',
                strokeWidth: 2,
                fill: '#10ac84',
                d: "M 20 -10 0 0 20 10 Z",
            },
            // 目标节点箭头
            targetMarker: {
                type: "path",
                stroke: "green",
                strokeWidth: 2,
                fill: "yellow",
                d: "M 20 -10 0 0 20 10 Z",
            },
        },
    });
    // 创建连线label标签，不给偏移位置，默认label标签居于线中间，可以时图片文本，节点拖动时跟着移动
    link.labels([
        {
            position: {
                offset: {
                    x: 0,
                    y: 20,
                },
            },
            attrs: {
                text: {
                    text: "双击连线可以改变颜色",
                },
            },
        },
        {
            position: {
                distance: 0.56
            },
            attrs: {
                text: {
                    text: "我是标签2",
                },
            },
        },
    ]);
    link.addTo(graph.value);
}

nextTick(() => {
    // 基础连线
    createGraph();
    createRect();
    createLink();
});
</script>
